<template>
  <div>
    <div>
      <ul>
        <li v-for="(item, index) in listjindu" :key="index">
          <span
            class="titlist"
            :style="{ backgroundImage: `url(${item.img})` }"
            style="background-size: 100% 100%"
            >{{ item.num }}</span
          >
          <span class="jinduname">{{ item.name }}</span>
          <el-progress
            :percentage="item.mode"
            :text-inside="false"
            :stroke-width="15"
            :color="item.customColors"
            text-color="#fff"
            :format="setItemText(item)"
          ></el-progress>
          <span class="baifen">{{ item.percentage }}%</span>
          <span
            class="icon arrawtransform"
            :style="{ backgroundImage: `url(${item.imgshang})` }"
            sty
          ></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import img1 from "../../assets/img/Union@1x-47.png";
import img2 from "../../assets/img/Union@1x-48.png";
import img3 from "../../assets/img/Union@1x-49.png";
import img4 from "../../assets/img/Union@1x-50.png";
import shang from "../../assets/common-new/green-top.png";
import xia from "../../assets/common-new/red-down.png";
export default {
  components: {},
  props: {},
  data() {
    return {
      listjindu: [
        {
          num: 1,
          mode: "100",
          total: 78.18,
          percentage: 10.72,
          name: "红三环(渡江)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img1,
          imgshang: shang,
        },
        {
          num: 2,
          mode: "70",
          total: 55.58,
          percentage: 10.58,
          name: "黄山(嘉宾迎客松)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img2,
          imgshang: shang,
        },
        {
          num: "3",
          mode: "69",
          total: 53.78,
          percentage: 25.77,
          name: "黄山(新一品)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img3,
          imgshang: shang,
        },
        {
          num: "4",
          mode: "65",
          total: 47.26,
          percentage: 193.17,
          name: "黄山(印象一品)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "5",
          mode: "64",
          total: 43.38,
          percentage: 30.8,
          name: "利群(新版)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "6",
          mode: "40",
          percentage: 168.0,
          total: 30.82,
          name: "云烟(紫)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "7",
          mode: "36",
          total: 27.7,
          percentage: 52.63,
          name: "黄山(新制皖烟)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "8",
          mode: "30",
          total: 23.66,
          percentage: 1172.04,
          name: "红河(软甲)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "9",
          mode: "25",
          total: 18.06,
          percentage: 34.98,
          name: "哈德门(纯香)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "10",
          mode: "24",
          total: 17.82,
          percentage: 135.09,
          name: "利群(长嘴)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "11",
          mode: "22",
          total: 16.3,
          percentage: 340.54,
          name: "牡丹(软)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "12",
          mode: "22",
          total: 15.98,
          percentage: 92.07,
          name: "红塔山(硬经典100)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "13",
          mode: "20",
          total: 15.58,
          percentage: 164.07,
          name: "红双喜(硬)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "14",
          mode: "19",
          total: 14.44,
          percentage: 97.27,
          name: "红塔山(软经典)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "15",
          mode: "18",
          total: 14.4,
          percentage: 101.68,
          name: "南京(红)",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    setItemText(row) {
      return () => {
        return row.total + "万支 ";
      };
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/qjzl-neiguan.scss";

.lftopdiv {
  width: 100%;
  height: 793px;
  margin: 0 auto;
  background: url(../../assets/qjzl/lftopdiv1.png);
  background-size: 100% 100%;
  padding: 27px 16px 18px 16px;
  margin-top: -7px;
  position: relative;

  ul {
    list-style: none;

    li {
      width: 100%;
      height: 50px;
      line-height: 30px;
    }

    .jinduname {
      white-space: nowrap;
      font-size: 8px;
    }

    .icon {
      width: 1.5%;
      height: 30%;
      font-size: 14px;
      background-size: 100% 100%;
      margin-top: 11px;
    }

    .baifen {
      width: 16%;
      margin-left: 10px;
      font-size: 14px;
    }
  }

  .titlist {
    float: left;
    width: 24px;
    height: 20px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    margin-top: 5px;
    margin-right: 5px;
    padding-right: 1px;
  }

  span {
    float: left;
    width: 15%;
  }

  .el-progress {
    float: left;
    width: 48%;
    margin-left: 40px;
    margin-top: 6px;
  }
}

.lftopdiv::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(../../assets/qjzl/lftopdiv1bot.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: 0%;
  left: 0%;
}

::v-deep .el-progress__text {
  width: 100%;
  font-size: 14px !important;
  text-align: center;
}

::v-deep .el-progress-bar__outer {
  background-color: rgba(17, 44, 112, 1) !important;
}
::v-deep .el-progress-bar {
  padding: 0 !important;
}
</style>